<template>
    <div class="box" @click="$emit('clicked')">
       <p class="text">{{postData.title}}</p>
       <div class="coverWrapper">
              <img :src="postData.cover[0].url || fixImgUrl" alt="">
              <div class="btn">
                  <span class="iconfont iconshipin"></span>
              </div>
          </div>  

        <div class="follow">
          <span>{{postData.user.nickname}}</span> <i class="follow-up">{{comment}}跟帖</i>
        </div>
    </div>
  
</template>

<script>
export default {
    props:['postData','comment']
}
</script>

<style lang="less" scoped>
.box {
  padding: 0 10/360 * 100vw;
  font-size: 14/360*100vw;
  border-bottom: 1/360 * 100vw solid #afafaf;
  .text{
        margin: 10/360*100vw 0 5/360*100vw;
    }
  .follow {
  padding: 10/360 * 100vw 0;
  color: #868686;
  .follow-num {
        margin-left: 10/360*100vw;
      }
}

.coverWrapper {
        position: relative;
        margin: 10/360*100vw 0;
        img {
            height: 170/360*100vw;
            width: 100%;
        }
        .btn {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            .iconshipin {
                font-size: 46/360*100vw;
                color: #fff;
                background: #e4e4e4;
                border-radius: 50%;
            }
        }
    }
}

</style>